import w0 from "@/assets/w0.png"; import w1 from "@/assets/w1.png"; import w2 from "@/assets/w2.png"; import w4 from "@/assets/w4.png"; import w5 from "@/assets/w5.png"; import w6 from "@/assets/w6.png"; import w7 from "@/assets/w7.png"; import w8 from "@/assets/w8.png"; import AvatarDrawing from "@/components/AvatarDrawing"; import AvatarTitle from "@/components/AvatarTitle"; import HitPointsModeText from "@/components/HitPointsModeText"; import JudgmentModeText from "@/components/JudgmentModeText"; import { GetCommentAPI } from "@/type/wwwAPI"; import { formatText, getQuitStatusValue } from "@/utilities/Utility"; import { useTranslations } from "next-intl"; import Image from "next/image"; import Link from "next/link"; import { useMemo } from "react"; import Col from "react-bootstrap/Col"; import Row from "react-bootstrap/Row"; import Stack from "react-bootstrap/Stack"; import { getDatetime } from "taehui-lib/date"; import scss from "@/app/[language]/note/components/CommentView.module.scss"; import AvatarPlaceText from "@/components/AvatarPlaceText"; const ws = [w0, w1, w2, "", w4, w5, w6, w7, w8]; export default function CommentView({ date, avatarID, avatarName, stand, band, point, isBand1, commentary, isTargetAvatar, judgmentMode, hitPointsMode, isPaused, handled, avatarPlace, }: GetCommentAPI["comments"][number] & { isTargetAvatar: boolean; }) { const { quit, quitCss } = useMemo( () => getQuitStatusValue(point, stand), [point, stand], ); const t = useTranslations(); return ( <Row as={Link} href={`/avatar/!${avatarID}`} className={`flex-nowrap ${isTargetAvatar ? scss.target : ""}`} > <Col xs="auto"> <AvatarPlaceText avatarPlace={avatarPlace} /> </Col> <Col xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="cc"> <Stack gap={2}> <AvatarTitle avatarID={avatarID} avatarName={avatarName} className="ellipsis" /> <HitPointsModeText hitPointsMode={hitPointsMode} text={t("textStand", { value: formatText(stand) })} /> {commentary && <span className="ellipsis">💬 {commentary}</span>} </Stack> </Col> <Col xs="auto"> <Stack gap={2}> <span className="date">{getDatetime(date)}</span> <Stack gap={2} direction="horizontal"> <JudgmentModeText judgmentMode={judgmentMode} text={`${(100 * point).toFixed(2)}%`} /> <span>{t("textBand", { value: band })}</span> {isPaused && "⏸️"} </Stack> </Stack> </Col> <Col xs="auto"> <span className={`quit ${quitCss}`}>{quit}</span> {isBand1 && "FULL"} </Col> <Col xs="auto"> <Image src={ws[handled]} width={10} height={60} alt="" /> </Col> </Row> ); }